<style lang="scss" scoped>
.option{
	margin: 0;
}
.query{
	width: 40%;
	margin:50rpx auto;
}

</style>
<template>
	<view class="auto-90 py-3">
		<text class="font-30 color-999">请选择市辖区</text>
		<view class="mt-2 d-flex wrap">
			 <button type="default" class="mx-2 my-1 primary-btn" size="mini" @click="active.district=val" :plain="active.district!==val" v-for="(val,index) in district_list" :key="index">{{val}}</button>
		</view>
		<text class="font-30 color-999 mt-5 pt-5 d-block">请选择部门</text>
		<view class="d-flex between wrap mt-2">
			 <button type="default" class="option primary-btn my-2" size="mini" @click="active.dept=val" :plain="active.dept!==val" v-for="(val,index) in dept_list" :key="index">{{val}}</button>
		</view>
		<button class="primary-btn  box-shadow query d-block" type="default"  @click="query">查询</button>
	</view>
</template>

<script>
	import {deptInfo} from "@api"
	export default {
		data() {
			return {
				district_list:[],
				dept_list:[],
				active:{
					district:'',
					dept:''
				}
			}
		},
		methods:{
			query(){
				if(!this.active.district || !this.active.dept)
					return
				uni.navigateTo({
				    url: `result?district=${this.active.district}&dept=${this.active.dept}`
				});
			}
		},
		onLoad() {
			deptInfo()
			.then(res=>{
				this.dept_list=res.list.dept_list
				this.district_list=res.list.district_list
			})
		}
	}
</script>